<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('合同社保公积金修改')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="form-socialPayment-edit" AUTOCOMPLETE="OFF">
        <input th:value="${data.id}" id="id" name="id" class="form-control" type="hidden"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">单位：</label>
                    <div class="col-sm-8">
                        <select name="compId" id="compId" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:each="pro:${userComp}" th:value="${pro.compId}"
                                    th:selected="${data.compId==pro.compId}"
                                    th:text="${pro.compName}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">年份：</label>
                    <div class="col-sm-8">
                        <select name="years" id="years" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:selected="${data.years==2020}" value="2020">2020</option>
                            <option th:selected="${data.years==2021}" value="2021">2021</option>
                            <option th:selected="${data.years==2022}" value="2022">2022</option>
                            <option th:selected="${data.years==2023}" value="2023">2023</option>
                            <option th:selected="${data.years==2024}" value="2024">2024</option>
                            <option th:selected="${data.years==2025}" value="2025">2025</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月份：</label>
                    <div class="col-sm-8">
                        <select name="months" id="months" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:selected="${data.months==1}" value="1">一月</option>
                            <option th:selected="${data.months==2}" value="2">二月</option>
                            <option th:selected="${data.months==3}" value="3">三月</option>
                            <option th:selected="${data.months==4}" value="4">四月</option>
                            <option th:selected="${data.months==5}" value="5">五月</option>
                            <option th:selected="${data.months==6}" value="6">六月</option>
                            <option th:selected="${data.months==7}" value="7">七月</option>
                            <option th:selected="${data.months==8}" value="8">八月</option>
                            <option th:selected="${data.months==9}" value="9">九月</option>
                            <option th:selected="${data.months==10}" value="10">十月</option>
                            <option th:selected="${data.months==11}" value="11">十一月</option>
                            <option th:selected="${data.months==12}" value="12">十二月</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">劳动合同情况</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">新签人数：</label>
                    <div class="col-sm-8">
                        <input id="newSignatureNum" name="newSignatureNum" class="form-control" type="number"
                               placeholder="请输入新签人数" th:value="${data.newSignatureNum}"  required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">续签人数：</label>
                    <div class="col-sm-8">
                        <input id="renewalNum" name="renewalNum" th:value="${data.renewalNum}" class="form-control" type="number" placeholder="续签人数"
                               required />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">终止人数：</label>
                    <div class="col-sm-8">
                        <input id="terminationNum" name="terminationNum" th:value="${data.terminationNum}"  class="form-control" type="number"
                               placeholder="请输入终止人数" required />
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">社保情况</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">上月末参保人数：</label>
                    <div class="col-sm-8">
                        <input id="lastMonthSocialNum" name="lastMonthSocialNum" th:value="${data.lastMonthSocialNum}" class="form-control" type="number"
                               placeholder="请输入上月未参保人数" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">新增人数：</label>
                    <div class="col-sm-8">
                        <input id="thisAddSocialNum" name="thisAddSocialNum" th:value="${data.thisAddSocialNum}" onblur="calcThisReduceSocialNum()" class="form-control" type="number"
                               placeholder="请输入新增人数" required />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">减少人数：</label>
                    <div class="col-sm-8">
                        <input id="thisReduceSocialNum" name="thisReduceSocialNum" th:value="${data.thisReduceSocialNum}" onblur="calcThisReduceSocialNum()" class="form-control" type="number"
                               placeholder="请输入减少人数" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">本月末社保人数：</label>
                    <div class="col-sm-8">
                        <input id="thisMonthSocialNum" name="thisMonthSocialNum" th:value="${data.thisMonthSocialNum}" class="form-control" type="number" required disabled />
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">公积金情况</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">上月末参加人数：</label>
                    <div class="col-sm-8">
                        <input id="lastMonthFundNum" name="lastMonthFundNum" th:value="${data.lastMonthFundNum}" class="form-control" type="number"
                               placeholder="请输入上月末参加人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">新增人数：</label>
                    <div class="col-sm-8">
                        <input id="thisAddFundNum" name="thisAddFundNum" th:value="${data.thisAddFundNum}" onblur="calcThisMonthFundNum()" class="form-control" type="number"
                               placeholder="请输入新增人数" required />
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">减少人数：</label>
                    <div class="col-sm-8">
                        <input id="thisReduceFundNum" name="thisReduceFundNum" th:value="${data.thisReduceFundNum}" onblur="calcThisMonthFundNum()" class="form-control" type="number"
                               placeholder="请输入减少人数" required />
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">本月末公积金人数：</label>
                    <div class="col-sm-8">
                        <input id="thisMonthFundNum" name="thisMonthFundNum" th:value="${data.thisMonthFundNum}" class="form-control" type="number"
                               placeholder="请输入本月末公积金人数" required disabled />
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script type="text/javascript">
    var prefix = ctx + 'socialPayment';


    function submitHandler() {
            if ($.validate.form()) {
                $("input").removeAttr('disabled');
                $("select").removeAttr('disabled');
                var data = $("#form-socialPayment-edit").serializeArray();
                $.operate.save(prefix + "/edit", data);
                //parent.sum();
            }
    }

    function getLastMonthData(){
         var compId = $("#compId").val();
         var months = $("#months").val();
         var years = $("#years").val();
         if(compId =='' || months == '' || years == ''){
             alert('请选择单位、年份、月');
         }else{
             $.ajax({
                 type : "post",
                 url : prefix + "/getLastMonthData",
                 data : {
                     "compId": compId,
                     "months": months,
                     "years": years
                 },
                 success : function(data) {
                     if(data.code == 0){
                        $("#lastMonthFundNum").val(data.data.thisMonthFundNum);
                        $("#lastMonthSocialNum").val(data.data.thisMonthSocialNum);
                     }else{
                         alert("未获取到上月社保和公积金人数,请查看是否录入或手动录入");
                     }
                 }
             });
         }
    }

    function calcThisReduceSocialNum(){
        var lastMonthSocialNum = $("#lastMonthSocialNum").val();
        var thisAddSocialNum = $("#thisAddSocialNum").val();
        var thisReduceSocialNum = $("#thisReduceSocialNum").val();
        if(lastMonthSocialNum != '' && thisAddSocialNum != '' && thisReduceSocialNum != ''){
            $("#thisMonthSocialNum").val(Number(lastMonthSocialNum) + Number(thisAddSocialNum) - Number(thisReduceSocialNum));
        }
    }

    function calcThisMonthFundNum(){
        var lastMonthFundNum = $("#lastMonthFundNum").val();
        var thisAddFundNum = $("#thisAddFundNum").val();
        var thisReduceFundNum = $("#thisReduceFundNum").val();
        if(lastMonthFundNum != '' && thisAddFundNum != '' && thisReduceFundNum != ''){
            $("#thisMonthFundNum").val(Number(lastMonthFundNum) + Number(thisAddFundNum) - Number(thisReduceFundNum));
        }
    }

</script>
</div>
</body>
</html>